<template>
  <div class="dashboard-container body">
    <div class="dashboard-text">
      <!-- 头部内容 -->
      <el-card class="header-card">
        <div>
          <el-row type="flex" justify="space-between">

            <div class="fl headL">
              <div class="headImg">
                <img src="@/assets/common/44.png">
              </div>
              <div class="headInfoTip">
                <p class="firstChild">您好！{{ name }}，祝你开心每一天！</p>
              </div>
            </div>
            <div class="fr">
              <div class="box1">
                <p class="box1-p">6/24</p>
                <p>今日入职</p>
              </div>
              <div id="box-2" class="box1">
                <p class="box1-p">887</p>
                <p>在职人数</p>
              </div>
              <div id="box-3" class="box1">
                <p class="box1-p">10</p>
                <p>离职人数</p>
              </div>
            </div>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="header">
          <span>工作安排</span>
        </div>
        <!-- 放置日历组件 -->
        <workCalendar />
        <!-- <el-calendar v-model="value" /> -->
      </el-card>
      <el-card>
        <h2>近3年的业绩分析图</h2>
        <el-row type="flex" justify="space-between">
          <!-- 柱状图 -->
          <el-col id="left" />
          <!-- 饼状图 -->
          <el-col id="right" />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
// echarts 按需引入
import * as echarts from 'echarts/core'
import {
  ToolboxComponent,
  TitleComponent,
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import { UniversalTransition, LabelLayout } from 'echarts/features'

echarts.use([
  ToolboxComponent,
  LineChart,
  TitleComponent,
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout
])

import { mapGetters } from 'vuex'

import workCalendar from './components/work-calendar.vue'
export default {
  name: 'Dashboard',
  components: { workCalendar },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    // console.log(222222222, this.$store.state.permission.routes)
    const chartDom = document.querySelector('#left')
    const myChart = echarts.init(chartDom)
    // 柱状图
    const option = {
      legend: {},
      tooltip: {},
      // 左标题
      title: {
        text: '价格数量分布'
      },
      // 右 下载-放大以及还原
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      dataset: {
        dimensions: ['product', '公寓', '别墅', '酒店'],
        source: [
          { product: '2014', '公寓': 43.3, '别墅': 85.8, '酒店': 93.7 },
          { product: '2015', '公寓': 83.1, '别墅': 73.4, '酒店': 55.1 },
          { product: '2016', '公寓': 86.4, '别墅': 65.2, '酒店': 82.5 }
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    }

    // 饼状图
    const rightDom = document.getElementById('right')
    const MyChart = echarts.init(rightDom)

    setTimeout(function() {
      const option = {
        // 左标题
        title: {
          text: '房产数量比例'
        },
        legend: {},
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015', '2016'],
            ['公寓', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ['别墅', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ['酒店', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self'
            },
            label: {
              formatter: '{b}: {@2012}'
            },
            encode: {
              itemName: 'product',
              value: '2012',
              tooltip: '2012'
            }
          }
        ]
      }
      MyChart.on('updateAxisPointer', function(event) {
        const xAxisInfo = event.axesInfo[0]
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1
          MyChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']}'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          })
        }
      })
      MyChart.setOption(option)
    })

    // option && MyChart.setOption(option)
    option && myChart.setOption(option)
  }
}
</script>

<style lang="scss" >
//日历
.box-card {
  padding: 5px 10px;
  margin-top: 20px;
  .header {
    span {
      color: #2c3e50;
      font-size: 24px;
    }
    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }
  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }
}
// 头部样式
.fr {
  display: flex;

.box1 {
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  width: 120px;
  height: 120px;
  font-size: 16px;
  border-radius:50% ;
  background-color: rgb(139, 153, 250);
  padding: 10px 0;
   margin:0 20px ;
  .box1-p{
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    // padding-top: 10px;
  }
  p {
  color: #fff;
  font-weight: 700;
  margin: 0;
  padding: 0;
  }
}
}
  #box-2 {
  background-color: rgb(253, 136, 101);
  }
  #box-3{
    background-color: rgb(255, 192, 0);
  }
.dashboard-container {
  margin: 10px;
  li {
    list-style: none;
  }
  .headImg {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #999;
          img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .headInfoTip {
    padding: 25px 0 0;
    margin-left: 120px;
    p {
      padding: 0 0 15px;
      margin: 0;
      &.firstChild {
        font-size: 24px;
      }
      &.lastChild {
        font-size: 20px;
        color: #7f8c8d;
      }
    }
  }
}
// 左上角按钮
.hamburger {
  background-color: #fff;
}
// echare样式
#left{
  width:50%;
  // height:calc(100vh - 350px);
  height: 400px;
}
#right{
  width:50%;
  // height:calc(100vh - 350px);
  height: 400px;
}
.dashboard {
  &-container {
    padding: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
